<!DOCTYPE html>
<!--**
 *Created by wf_H on 2018/8/6.
 *by:web_hwf@sina.com
 *-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>客户管理-意向客户管理</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="../style/dist/zui@1.8.1/css/zui.min.css">
    <link rel="stylesheet" href="../style/dist/zui@1.8.1/css/zui-theme.css">
    <link rel="stylesheet" href="../style/dist/hover.css">

    <link rel="stylesheet" href="../style/h-base.css">
    <link rel="stylesheet" href="../style/h-index.css">
</head>
<body class="childrenBody">

<div class="khgl_tab_list">
    <div class="tab_item">
        <div class="right_number">
            <p>客户总数</p>
            <em>56</em>
        </div>
    </div>
    <div class="tab_item">
        <div class="right_number">
            <p>已签约客户数</p>
            <em>56</em>
            <div class="text_title">
                <p>签约率</p>
                <p>38.5%</p>
            </div>
        </div>
    </div>
    <div class="tab_item">
        <div class="right_number">
            <p>已部署平台客户数</p>
            <em>56</em>
            <div class="text_title">
                <p>签约率</p>
                <p>38.5%</p>
            </div>
        </div>
    </div>
    <div class="tab_item">
        <div class="right_number">
            <p>已产单客户数</p>
            <em>56</em>
            <div class="text_title">
                <p>签约率</p>
                <p>38.5%</p>
            </div>
        </div>
    </div>
    <div class="tab_item">
        <div class="right_number">
            <p>已付款客户数</p>
            <em>56</em>
            <div class="text_title">
                <p>签约率</p>
                <p>38.5%</p>
            </div>
        </div>
    </div>
</div>

<!--nav 部件-->
<div class="nav_list">
    <div class="text_title">意向客户管理</div>
    <a href="javascript:;" class="text_item active"><span>意向客户管理</span></a>
    <a href="javascript:;" class="text_item "><span>已签约客户管理</span></a>
    <a href="javascript:;" class="text_item "><span>客户平台管理</span></a>

    <button class="btn btn-primary btn_add pull-right" style="margin-top: 10px" id="add_kh_model"><i class="icon_img_01"></i>新增客户关系</button>
</div>


<!--搜索内容-->
<div class="search_form">
    <div class="row">
        <div class="col-lg-6 col-md-9 col-sm-12" style="float:right;">
            <div class="input-group input_jygl">
                <span class="input-group-addon fix-border fix-padding">客户名称</span>
                <input type="text" class="form-control">
                <span class="input-group-addon fix-border fix-padding">合作意愿</span>
                <select class="form-control">
                    <option value="1">全部</option>
                    <option value="1">...</option>
                </select>
                <span class="input-group-addon fix-border fix-padding">客户类型</span>
                <select class="form-control">
                    <option value="1">所有工会</option>
                    <option value="1">...</option>
                </select>
                <span class="input-group-addon fix-border fix-padding"></span>
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button" style="padding-left: 25px ;padding-right: 25px">筛选</button>
                </span>
            </div>
        </div>
    </div>
</div>

<!--选项卡-->
<div class="khyx_list">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="ssgl_item h_240 hvr-outline-in">
                <div class="img_btn">
                    <a href="javascript:;"><i class="icon_img_02"></i></a>
                    <a href="javascript:;"><i class="icon_img_05"></i></a>
                </div>
                <div class="text_top h_text_sl_1">
                    湖南省总工会
                </div>
                <div class="col-xs-6 h_text_sl_1">类型：区级工会</div>
                <div class="col-xs-6 h_text_sl_1">合作意愿：<strong class="color_02">较弱</strong></div>
                <div class="col-xs-6 h_text_sl_1">联系人：张小华</div>
                <div class="col-xs-6 h_text_sl_1">职务：宣教部部长</div>
                <div class="col-xs-6 h_text_sl_1">联系电话：151****6989</div>
                <div class="col-xs-12" style="padding: 0"><hr style="margin: 10px 0"></div>

                <div class="col-xs-6 h_text_sl_1">发展人：王敏</div>
                <div class="col-xs-6 h_text_sl_1">创建日期：2018-10-10</div>

                <div class="col-xs-12">
                    <div class="title_bg">
                        <p class="text_1">意向服务：   <strong>补贴、票券</strong></p>
                        <p class="text_2">2018-10-12(已访谈1次)</p>
                    </div>
                </div>

                <div class="footer_list" >
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">客户档案</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">立即签约</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">访谈客户</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="ssgl_item h_240 hvr-outline-in">
                <div class="img_btn">
                    <a href="javascript:;"><i class="icon_img_02"></i></a>
                    <a href="javascript:;"><i class="icon_img_05"></i></a>
                </div>
                <div class="text_top h_text_sl_1">
                    湖南省总工会
                </div>
                <div class="col-xs-6 h_text_sl_1">类型：区级工会</div>
                <div class="col-xs-6 h_text_sl_1">合作意愿：<strong class="color_02">较弱</strong></div>
                <div class="col-xs-6 h_text_sl_1">联系人：张小华</div>
                <div class="col-xs-6 h_text_sl_1">职务：宣教部部长</div>
                <div class="col-xs-6 h_text_sl_1">联系电话：151****6989</div>
                <div class="col-xs-12" style="padding: 0"><hr style="margin: 10px 0"></div>

                <div class="col-xs-6 h_text_sl_1">发展人：王敏</div>
                <div class="col-xs-6 h_text_sl_1">创建日期：2018-10-10</div>

                <div class="col-xs-12">
                    <div class="title_bg">
                        <p class="text_1">意向服务：   <strong>补贴、票券</strong></p>
                        <p class="text_2">2018-10-12(已访谈1次)</p>
                    </div>
                </div>

                <div class="footer_list" >
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">客户档案</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">立即签约</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">访谈客户</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="ssgl_item h_240 hvr-outline-in">
                <div class="img_btn">
                    <a href="javascript:;"><i class="icon_img_02"></i></a>
                    <a href="javascript:;"><i class="icon_img_05"></i></a>
                </div>
                <div class="text_top h_text_sl_1">
                    湖南省总工会
                </div>
                <div class="col-xs-6 h_text_sl_1">类型：区级工会</div>
                <div class="col-xs-6 h_text_sl_1">合作意愿：<strong class="color_02">较弱</strong></div>
                <div class="col-xs-6 h_text_sl_1">联系人：张小华</div>
                <div class="col-xs-6 h_text_sl_1">职务：宣教部部长</div>
                <div class="col-xs-6 h_text_sl_1">联系电话：151****6989</div>
                <div class="col-xs-12" style="padding: 0"><hr style="margin: 10px 0"></div>

                <div class="col-xs-6 h_text_sl_1">发展人：王敏</div>
                <div class="col-xs-6 h_text_sl_1">创建日期：2018-10-10</div>

                <div class="col-xs-12">
                    <div class="title_bg">
                        <p class="text_1">意向服务：   <strong>补贴、票券</strong></p>
                        <p class="text_2">2018-10-12(已访谈1次)</p>
                    </div>
                </div>

                <div class="footer_list" >
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">客户档案</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn" disabled>√ 已签约</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">访谈客户</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="ssgl_item h_240 hvr-outline-in">
                <div class="img_btn">
                    <a href="javascript:;"><i class="icon_img_02"></i></a>
                    <a href="javascript:;"><i class="icon_img_05"></i></a>
                </div>
                <div class="text_top h_text_sl_1">
                    湖南省总工会
                </div>
                <div class="col-xs-6 h_text_sl_1">类型：区级工会</div>
                <div class="col-xs-6 h_text_sl_1">合作意愿：<strong class="color_02">较弱</strong></div>
                <div class="col-xs-6 h_text_sl_1">联系人：张小华</div>
                <div class="col-xs-6 h_text_sl_1">职务：宣教部部长</div>
                <div class="col-xs-6 h_text_sl_1">联系电话：151****6989</div>
                <div class="col-xs-12" style="padding: 0"><hr style="margin: 10px 0"></div>

                <div class="col-xs-6 h_text_sl_1">发展人：王敏</div>
                <div class="col-xs-6 h_text_sl_1">创建日期：2018-10-10</div>

                <div class="col-xs-12">
                    <div class="title_bg">
                        <p class="text_1">意向服务：   <strong>补贴、票券</strong></p>
                        <p class="text_2">2018-10-12(已访谈1次)</p>
                    </div>
                </div>

                <div class="footer_list" >
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">客户档案</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">立即签约</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">访谈客户</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="ssgl_item h_240 hvr-outline-in">
                <div class="img_btn">
                    <a href="javascript:;"><i class="icon_img_02"></i></a>
                    <a href="javascript:;"><i class="icon_img_05"></i></a>
                </div>
                <div class="text_top h_text_sl_1">
                    湖南省总工会
                </div>
                <div class="col-xs-6 h_text_sl_1">类型：区级工会</div>
                <div class="col-xs-6 h_text_sl_1">合作意愿：<strong class="color_02">较弱</strong></div>
                <div class="col-xs-6 h_text_sl_1">联系人：张小华</div>
                <div class="col-xs-6 h_text_sl_1">职务：宣教部部长</div>
                <div class="col-xs-6 h_text_sl_1">联系电话：151****6989</div>
                <div class="col-xs-12" style="padding: 0"><hr style="margin: 10px 0"></div>

                <div class="col-xs-6 h_text_sl_1">发展人：王敏</div>
                <div class="col-xs-6 h_text_sl_1">创建日期：2018-10-10</div>

                <div class="col-xs-12">
                    <div class="title_bg">
                        <p class="text_1">意向服务：   <strong>补贴、票券</strong></p>
                        <p class="text_2">2018-10-12(已访谈1次)</p>
                    </div>
                </div>

                <div class="footer_list" >
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">客户档案</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">立即签约</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">访谈客户</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="ssgl_item h_240 hvr-outline-in">
                <div class="img_btn">
                    <a href="javascript:;"><i class="icon_img_02"></i></a>
                    <a href="javascript:;"><i class="icon_img_05"></i></a>
                </div>
                <div class="text_top h_text_sl_1">
                    湖南省总工会
                </div>
                <div class="col-xs-6 h_text_sl_1">类型：区级工会</div>
                <div class="col-xs-6 h_text_sl_1">合作意愿：<strong class="color_02">较弱</strong></div>
                <div class="col-xs-6 h_text_sl_1">联系人：张小华</div>
                <div class="col-xs-6 h_text_sl_1">职务：宣教部部长</div>
                <div class="col-xs-6 h_text_sl_1">联系电话：151****6989</div>
                <div class="col-xs-12" style="padding: 0"><hr style="margin: 10px 0"></div>

                <div class="col-xs-6 h_text_sl_1">发展人：王敏</div>
                <div class="col-xs-6 h_text_sl_1">创建日期：2018-10-10</div>

                <div class="col-xs-12">
                    <div class="title_bg">
                        <p class="text_1">意向服务：   <strong>补贴、票券</strong></p>
                        <p class="text_2">2018-10-12(已访谈1次)</p>
                    </div>
                </div>

                <div class="footer_list" >
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">客户档案</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn" disabled>√ 已签约</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">访谈客户</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="ssgl_item h_240 hvr-outline-in">
                <div class="img_btn">
                    <a href="javascript:;"><i class="icon_img_02"></i></a>
                    <a href="javascript:;"><i class="icon_img_05"></i></a>
                </div>
                <div class="text_top h_text_sl_1">
                    湖南省总工会
                </div>
                <div class="col-xs-6 h_text_sl_1">类型：区级工会</div>
                <div class="col-xs-6 h_text_sl_1">合作意愿：<strong class="color_02">较弱</strong></div>
                <div class="col-xs-6 h_text_sl_1">联系人：张小华</div>
                <div class="col-xs-6 h_text_sl_1">职务：宣教部部长</div>
                <div class="col-xs-6 h_text_sl_1">联系电话：151****6989</div>
                <div class="col-xs-12" style="padding: 0"><hr style="margin: 10px 0"></div>

                <div class="col-xs-6 h_text_sl_1">发展人：王敏</div>
                <div class="col-xs-6 h_text_sl_1">创建日期：2018-10-10</div>

                <div class="col-xs-12">
                    <div class="title_bg">
                        <p class="text_1">意向服务：   <strong>补贴、票券</strong></p>
                        <p class="text_2">2018-10-12(已访谈1次)</p>
                    </div>
                </div>

                <div class="footer_list" >
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">客户档案</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">立即签约</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">访谈客户</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="ssgl_item h_240 hvr-outline-in">
                <div class="img_btn">
                    <a href="javascript:;"><i class="icon_img_02"></i></a>
                    <a href="javascript:;"><i class="icon_img_05"></i></a>
                </div>
                <div class="text_top h_text_sl_1">
                    湖南省总工会
                </div>
                <div class="col-xs-6 h_text_sl_1">类型：区级工会</div>
                <div class="col-xs-6 h_text_sl_1">合作意愿：<strong class="color_02">较弱</strong></div>
                <div class="col-xs-6 h_text_sl_1">联系人：张小华</div>
                <div class="col-xs-6 h_text_sl_1">职务：宣教部部长</div>
                <div class="col-xs-6 h_text_sl_1">联系电话：151****6989</div>
                <div class="col-xs-12" style="padding: 0"><hr style="margin: 10px 0"></div>

                <div class="col-xs-6 h_text_sl_1">发展人：王敏</div>
                <div class="col-xs-6 h_text_sl_1">创建日期：2018-10-10</div>

                <div class="col-xs-12">
                    <div class="title_bg">
                        <p class="text_1">意向服务：   <strong>补贴、票券</strong></p>
                        <p class="text_2">2018-10-12(已访谈1次)</p>
                    </div>
                </div>

                <div class="footer_list" >
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">客户档案</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">立即签约</button>
                    </a>
                    <a href="javascript:;" class="">
                        <button class="btn btn-primary btn_add">访谈客户</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="text-align: center">

        <ul class="pager">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
            <li><a href="#">12</a></li>
            <li class="next"><a href="#">下一页 »</a></li>
            <div class="input-group" style="width: 100px;float: left;margin-left: 10px">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">GO</button>
                </span>
            </div>
            <li><div class="pager-label">共 <strong>89</strong> 页</div></li>
        </ul>


    </div>
</div>


<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal" style="opacity: 1"><span aria-hidden="true" style="color: #ffffff">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">创建客户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group col-sm-6">
                        <label for="input_02" class="col-sm-3">所属工会</label>
                        <div class="col-md-9 col-sm-9">
                            <input type="text" class="form-control" id="input_01" >
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="input_02" class="col-sm-3">联系人</label>
                        <div class="col-md-9 col-sm-9">
                            <input type="text" class="form-control" id="input_02" >
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="input_03" class="col-sm-3">拓展人</label>
                        <div class="col-md-9 col-sm-9">
                            <input type="text" class="form-control" id="input_03" >
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="input_04" class="col-sm-3">联系电话</label>
                        <div class="col-md-9 col-sm-9">
                            <input type="text" class="form-control" id="input_04" >
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="input_05" class="col-sm-3">联系人职务</label>
                        <div class="col-md-9 col-sm-9">
                            <input type="text" class="form-control" id="input_05" >
                        </div>
                    </div>

                    <div class="form-group col-sm-12" style="position: relative">
                        <span style="font-size: 18px;font-weight: bold;color: #333333;position: absolute;background-color: #fff;padding-right: 20px;top: 5px;">客户访谈内容</span>
                        <hr>
                    </div>

                    <div class="form-group col-sm-6">
                        <label for="input_06" class="col-sm-3">合作意向服务</label>
                        <div class="col-md-9 col-sm-9">
                            <div class="checked_list row" id="input_06">
                                <div class="checkbox_s i-checks col-lg-4 col-md-2 col-sm-4">
                                    <label style="margin: 5px 0 0;"><input type="checkbox" value=""> <i></i> 补贴</label>
                                </div>
                                <div class="checkbox_s i-checks col-lg-4 col-md-2 col-sm-4">
                                    <label style="margin: 5px 0 0;"><input type="checkbox" value=""> <i></i> 教育培训</label>
                                </div>
                                <div class="checkbox_s i-checks col-lg-4 col-md-2 col-sm-4">
                                    <label style="margin: 5px 0 0;"><input type="checkbox" value=""> <i></i> 票券</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="input_07" class="col-sm-3">预约回访</label>
                        <div class="col-md-9 col-sm-9">
                            <input type="text" class="form-control" id="input_07" >
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="input_08" class="col-sm-3">合作意愿</label>
                        <div class="col-md-9 col-sm-9">
                            <select class="form-control" id="input_08">
                                <option>请选择</option>
                                <option>......</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="input_09" class="col-sm-3">访谈方式</label>
                        <div class="col-md-9 col-sm-9">
                            <select class="form-control" id="input_09">
                                <option>请选择</option>
                                <option>......</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label for="input_11" class="col-sm-2" style="width: 12%">访谈内容</label>
                        <div class="col-md-10 col-sm-10">
                            <textarea class="form-control" id="input_11" rows="4" style="width: 103%"></textarea>
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label for="input_12" class="col-sm-2" style="width: 12%">客户顾忌</label>
                        <div class="col-md-10 col-sm-10">
                            <textarea class="form-control" id="input_12" rows="3" style="width: 103%" placeholder="可填写客户访谈时的顾忌和未解决的顾忌"></textarea>
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label for="input_13" class="col-sm-2" style="width: 12%">解决方案</label>
                        <div class="col-md-10 col-sm-10">
                            <textarea class="form-control" id="input_13" rows="3" style="width: 103%" placeholder="可填写访谈时解决的客户顾忌问题和后续将采取的对策"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12" style="text-align: center">
                            <button type="button" class="btn btn-primary btn-lg">保存</button>
                            <button type="button" class="btn btn_add btn-lg"  data-dismiss="modal" >关闭</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>



<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../style/dist/zui@1.8.1/js/zui.min.js"></script>

<!--复选美化-->
<script src="../style/dist/icheck.min.js"></script>
<script>

    // 或者在初始化时指定
    $('[data-toggle="tooltip"]').tooltip({
        tipClass: 'tooltip-primary'
    });

    /*初始化多选美化*/
    $(document).ready(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})
    });

    $(function () {
        $('.nav_list').on('click', 'a', function () {
            $(this).addClass('active').siblings().removeClass('active');
        })
        
        
        $('#add_kh_model').click(function () {
            $('#myModal').modal('show', 'fit')
        })
    })
    
    
</script>
</body>
</html>